<template>
    <div class="main_box" style="height:100%;width:100% ">
        <!-- header -->
        <mt-header title="小米商城" >
            <router-link to="/" slot="left">
                <mt-button icon="back" v-show="tag">返回</mt-button>
            </router-link>
        </mt-header>
        <!-- nav -->
        <!-- <router-view tag="div" class="container"></router-view> -->
         <transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight" duration="300">
            <router-view tag="div" class="container animated"></router-view>
        </transition>
        <!-- tabble -->
        <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item mui-active"  to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item"  to="/user">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>
			<router-link class="mui-tab-item"  to="/cart">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item"  to="/news">
				<span class="mui-icon mui-icon-extra mui-icon-extra-new"></span>
				<span class="mui-tab-label">咨讯</span>
			</router-link>
		</nav>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tag:false
        }
    },
}
</script>

<style>
    *{margin: 0;padding: 0;}
    a{text-decoration: none;}
    ul{list-style: none;}
    html,body{width: 100%;height: 100%;}
    .main_box .mint-header {
        width: 100%;
        height: 40px;
        background-color: rgb(205, 226, 17);
        position: fixed;top: 0;left: 0;
        z-index: 2;
        overflow: hidden;
    }
    .main_box .container{
       margin-top: 40px;
       margin-bottom: 50px;
       position: absolute;left: 0;top: 0;
    }
    .main_box .mui-bar-tab{
         position: fixed;bottom: 0;left: 0;
         overflow: hidden;
         background-color: rgba(21, 185, 150, 0.377);
    }
</style>

